<template>
  <div id="docDEtail">
    <el-button type="info" size="mini" @click="goBack">返回</el-button>
    <div class="markdown-body">

      <MarkdownReander v-if="queryName == DOC.DMmarkdownRender">
        <template v-slot:footer>
          <div>已经到底部啦~~~</div>
        </template>
      </MarkdownReander>
      <VueUpData v-else-if="queryName == DOC.DMvueUpData" />
      <VueSet v-else-if="queryName == DOC.DMvueSet" />
      <VModel v-else-if="queryName == DOC.DMvmodel" />
      <VFliters v-else-if="queryName == DOC.DMfilters">
        <template v-slot:bootcdn>
        <a href="https://www.bootcdn.cn/" target="_blank">bootcdn的地址</a>
        </template>
       
      </VFliters>

      <VwatchComputer v-else-if="queryName == DOC.DMwatchComputer"/>
      <VBuiltInCommands v-else-if="queryName == DOC.DMBuiltInCommands"/>
      <VlifeCycle v-else-if="queryName == DOC.DMlifeCycle"/>
      <VregularExpression v-else-if="queryName == DOC.DMregularExpression"/>
      <VvautoImport v-else-if="queryName == DOC.DMvautoImport"/>

      <div v-else>老铁没内容~</div>
    



    </div>
  </div>
</template>
<script>
import DOC, { MarkdownReander, VueUpData,VueSet,VModel,VFliters ,VwatchComputer,VBuiltInCommands,VlifeCycle,VregularExpression,VvautoImport} from "@components/DOC/index.js";
export default {
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      console.log("to.query.name==",to.query.name);
      // 虽然beforeRouteEnter不可以获取this,但可以通过next回调参数得到this的对象
      vm.queryName = to.query.name;
      
    });
  },
  
  // components:OBJ,
  components: {
    MarkdownReander,
    VueUpData,
    VueSet,
    VModel,
    VFliters,
    VwatchComputer,
    VBuiltInCommands,
    VlifeCycle,
    VregularExpression,
    VvautoImport
  },
  data() {
    return {
      DOC,
      queryName: "",
      scrollTop: 0,
      tabOffsetTop: 0,
      scroll: ''
    };
  },
  methods: {
    goBack() {
      this.$router.back();
    },
  },

  mounted(){
  }
};
</script>